<template>
	<el-dialog title="提示" :visible.sync="dialogVisibleData" width="36%">
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="100px"
			class="demo-ruleForm"
		>
			<el-form-item label="角色名称" prop="username">
				<el-input v-model="ruleForm.username"></el-input>
			</el-form-item>
			<el-form-item label="角色描述" prop="describe">
				<el-input v-model="ruleForm.describe"></el-input>
			</el-form-item>
		</el-form>

		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible">取 消</el-button>
			<el-button type="primary" @click="dialogVisibled">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
export default {
	name: 'Verifications',
	data() {
		return {
			dialogVisibleData: false,
			ruleForm: {
				username: '',
				describe: '',
				id: '',
			},
			rules: {
				username: [
					{ required: true, message: '角色名称不能为空', trigger: 'blur' },
				],
				describe: [
					{ required: true, message: '角色描述不能为空', trigger: 'blur' },
				],
			},
		}
	},
	methods: {
		dialogVisible() {
			this.dialogVisibleData = false
		},
		dialogVisibled() {
			this.$refs.ruleForm.validate(boolean => {
				if (boolean) {
					this.$http
						.put(`/roles/${this.ruleForm.id}`, {
							roleName: this.ruleForm.username,
							roleDesc: this.ruleForm.describe,
						})
						.then(response => {
							let { meta } = response.data
							if (meta.status == 200) {
								this.$message({
									message: '修改成功',
                                    type:'success'
								})
							} else {
								this.$message.error('修改失败')
							}
							this.$bus.$emit('Rolesreload')
						})
						.catch(error => {
							console.log(error.message)
						})
				} else {
					this.$message.error('修改失败')
				}
			})
			this.dialogVisibleData = false
		},
	},
	mounted() {
		this.$bus.$on('startDialog', data => {
			this.dialogVisibleData = true

			let { roleDesc, roleName, id } = data
			this.ruleForm.username = roleDesc
			this.ruleForm.describe = roleName
			this.ruleForm.id = id
		})
	},
}
</script>
